<template>
    <div class="setCon">
		<a-form :form="form" @submit="handleSubmit">
		  <!-- 调课原因设置 -->
		  <a-form-item label="调课原因类别">
		    <a-button type="dashed" @click="addReasonCategory">添加一级原因</a-button>
		    <a-tree
		      :treeData="reasonTree"
		      :defaultExpandAll="true"
		      :autoExpandParent="autoExpandParent"
		      @select="onSelect"
		    >
		      <template slot="title" slot-scope="{title, key, isLeaf}">
		        <template v-if="!isLeaf">
		          <a-input
		            v-if="editingKey === key"
		            :ref="'categoryInput_'+key"
		            v-model="editingTitle"
		            @blur="saveEdit(key)"
		            @pressEnter="saveEdit(key)"
		          />
		          <span v-else>
		            {{ title }}
		            <a-icon type="edit" @click="editNode(key, title)" />
		            <a-icon type="delete" @click="removeNode(key)" />
		            <a-icon type="plus" @click="addChildReason(key)" />
		          </span>
		        </template>
		        <template v-else>
		          <a-input
		            v-if="editingKey === key"
		            :ref="'reasonInput_'+key"
		            v-model="editingTitle"
		            @blur="saveEdit(key)"
		            @pressEnter="saveEdit(key)"
		          />
		          <span v-else>
		            {{ title }}
		            <a-icon type="edit" @click="editNode(key, title)" />
		            <a-icon type="delete" @click="removeNode(key)" />
		          </span>
		        </template>
		      </template>
		    </a-tree>
		  </a-form-item>
		
		  <!-- 原因属性设置 -->
		  <a-form-item label="原因属性设置" v-if="selectedReason">
		    <a-checkbox v-model="selectedReason.needAttachment">需要上传附件</a-checkbox>
		    <a-checkbox v-model="selectedReason.notCount">不计入调课次数</a-checkbox>
		  </a-form-item>
		
		  <!-- 冲突控制设置 -->
		  <a-form-item label="冲突控制">
		    <a-radio-group v-model="conflictControlType">
		      <a-radio value="count">按人数上限</a-radio>
		      <a-radio value="percent">按比例上限</a-radio>
		    </a-radio-group>
		    <a-input-number
		      v-if="conflictControlType === 'count'"
		      v-model="maxConflictStudents"
		      :min="0"
		      :max="1000"
		    />
		    <a-input-number
		      v-if="conflictControlType === 'percent'"
		      v-model="maxConflictPercent"
		      :min="0"
		      :max="100"
		      :formatter="value => `${value}%`"
		      :parser="value => value.replace('%', '')"
		    />
		  </a-form-item>
		
		  <!-- 特殊调课设置 -->
		  <a-form-item label="特殊调课设置">
		    <a-checkbox v-model="onlyChangeRoomNotCount">只调教室不计入调课次数</a-checkbox>
		    <a-checkbox v-model="onlyChangeTeacherNotCount">只调教师不计入调课次数</a-checkbox>
		  </a-form-item>
		
		  <a-form-item>
		    <a-button type="primary" html-type="submit">保存设置</a-button>
		  </a-form-item>
		</a-form>
	</div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      reasonTree: [
        {
          title: '教师原因',
          key: '0-0',
          children: [
            { title: '病假', key: '0-0-0', needAttachment: true, notCount: false },
            { title: '事假', key: '0-0-1', needAttachment: true, notCount: false }
          ]
        },
        {
          title: '学校原因',
          key: '0-1',
          children: [
            { title: '教室维修', key: '0-1-0', needAttachment: false, notCount: true },
            { title: '统一考试', key: '0-1-1', needAttachment: false, notCount: true }
          ]
        }
      ],
      autoExpandParent: true,
      editingKey: '',
      editingTitle: '',
      selectedReason: null,
      conflictControlType: 'count',
      maxConflictStudents: 10,
      maxConflictPercent: 20,
      onlyChangeRoomNotCount: true,
      onlyChangeTeacherNotCount: true
    }
  },
  methods: {
    addReasonCategory() {
      const newKey = `0-${this.reasonTree.length}`
      this.reasonTree.push({
        title: '新类别',
        key: newKey,
        children: []
      })
    },
    addChildReason(key) {
      const parentNode = this.findNode(this.reasonTree, key)
      if (parentNode) {
        const newKey = `${key}-${parentNode.children.length}`
        parentNode.children.push({
          title: '新原因',
          key: newKey,
          needAttachment: false,
          notCount: false
        })
      }
    },
    editNode(key, title) {
      this.editingKey = key
      this.editingTitle = title
      this.$nextTick(() => {
        const refName = this.isLeaf(key) ? `reasonInput_${key}` : `categoryInput_${key}`
        this.$refs[refName].focus()
      })
    },
    saveEdit(key) {
      const node = this.findNode(this.reasonTree, key)
      if (node) {
        node.title = this.editingTitle
      }
      this.editingKey = ''
    },
    removeNode(key) {
      const parentKey = key.substring(0, key.lastIndexOf('-'))
      const parentNode = this.findNode(this.reasonTree, parentKey)
      if (parentNode) {
        parentNode.children = parentNode.children.filter(item => item.key !== key)
      } else {
        this.reasonTree = this.reasonTree.filter(item => item.key !== key)
      }
    },
    findNode(nodes, key) {
      for (const node of nodes) {
        if (node.key === key) return node
        if (node.children) {
          const found = this.findNode(node.children, key)
          if (found) return found
        }
      }
      return null
    },
    isLeaf(key) {
      return key.split('-').length > 2
    },
    onSelect(selectedKeys, { selectedNodes }) {
      if (selectedKeys.length > 0 && this.isLeaf(selectedKeys[0])) {
        this.selectedReason = this.findNode(this.reasonTree, selectedKeys[0])
      } else {
        this.selectedReason = null
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.$message.success('设置已保存')
    }
  }
}
</script>
<style lang="less" scoped>
	.setCon{
		padding:20px;
		padding-top:0;
	}
	</style>